<template>
  <div class="prop-form-demo">
    <div class="prop-form-container clear">
      <div class="prop-form-left pull-left">
        <ul class="list clear">
          <li
            class="detail pull-left"
            v-for="item in formList"
            :key="item.type"
            @click="addData(item)">
            <div>{{item._custom_chooseText}}</div>
          </li>
        </ul>
      </div>
      <div class="prop-form-right pull-left">
        <button @click="getFilterData">获取数据</button>
        <button @click="formValidate">校验表单</button>
        <button @click="formResetFields">清除表单校验</button>
        <button @click="addTbody">增加一行tboddy</button>

        <div>
          <div>监控字段：</div>
          <div>
            <div
            v-for="(item, index) in operationKeys"
            :key="index"
            @click="keysClick(item)"
            style="padding: 5px;">{{item.label}}</div>
          </div>

          <div>常量：</div>
          <div>
            <InputNumber v-model="operationNumber"></InputNumber>
            <Button type="info" @click="numberClick">确认</Button>
          </div>

          <div>运算符：</div>
          <div>
            <Button type="ghost" shape="circle" @click="symbolClick('+')">+</Button>
            <Button type="ghost" shape="circle" @click="symbolClick('-')">-</Button>
            <Button type="ghost" shape="circle" @click="symbolClick('*')">*</Button>
            <Button type="ghost" shape="circle" @click="symbolClick('/')">/</Button>
            <Button type="ghost" shape="circle" @click="symbolClick('(')">(</Button>
            <Button type="ghost" shape="circle" @click="symbolClick(')')">)</Button>
          </div>

          <div>运算公式：</div>
          <div>
            <Input readonly v-model="operationFormula.key" type="textarea" />
          </div>

          <div>
            <Button type="info" @click="revokeClick">撤销</Button>
            <Button type="info" @click="deleteClick">删除</Button>
            <Button type="info" @click="commitClick">运算</Button>
          </div>
        </div>
      </div>
    </div>
    <prop-form
      ref="prop-form"
      v-model="formItemList"
      :isDrag="true"
      @listClick="listClick"></prop-form>
  </div>
</template>

<script>
  import propForm from './prop-form'

  export default {
    computed: {
      operationKeys () {
        let arr = []
        this.formItemList.map(item => {
          item.children.map(child => {
            if (child.type === 'InputNumber') {
              arr.push(child)
            }
          })
        })

        return arr
      }
    },
    components: {
      'prop-form': propForm
    },
    data () {
      return {
        operationNumber: 0,
        operationFormula: {
          key: '',
          value: []
        },
        formList: [
          {
            _custom_chooseText: '单行输入框',
            type: 'Input',
            label: '姓名2',
            options: {
              placeholder: '请输入22',
              rows: 4,
              value: 'sdsadas',
              readonly: true
            }
          }, {
            _custom_chooseText: '多行输入框',
            type: 'Textarea',
            label: '姓名2',
            options: {
              placeholder: '请输入22',
              rows: 4,
              value: 'sdsadas'
            }
          }, {
            _custom_chooseText: '数字',
            type: 'InputNumber',
            label: '姓名3',
            options: {
              min: 15,
              max: 20,
              value: 16
            }
          }, {
            _custom_chooseText: '下拉列表',
            type: 'Select',
            label: '姓名4',
            options: {
              value: 'aa'
            },
            optionList: [{
              value: 'aa',
              label: 'aa'
            }, {
              value: 'bb',
              label: 'bb'
            }, {
              value: 'cc',
              label: 'cc'
            }]
          }, {
            _custom_chooseText: '人员选择',
            type: 'SelectPerson',
            label: '姓名4',
            options: {
              value: 'aa'
            },
            optionList: [{
              value: 'aa',
              label: 'aa'
            }, {
              value: 'bb',
              label: 'bb'
            }, {
              value: 'cc',
              label: 'cc'
            }]
          }, {
            _custom_chooseText: '部门选择',
            type: 'SelectDepartment',
            label: '姓名4',
            options: {
              value: 'aa'
            },
            optionList: [{
              value: 'aa',
              label: 'aa'
            }, {
              value: 'bb',
              label: 'bb'
            }, {
              value: 'cc',
              label: 'cc'
            }]
          }, {
            _custom_chooseText: '附件上传',
            type: 'Upload',
            label: '姓名5',
            options: {
              action: 'www.baidu.com'
            }
          }, {
            _custom_chooseText: '日期选择',
            type: 'DatePicker',
            label: '姓名6',
            options: {
              value: 'aa',
              placeholder: '请选择'
            }
          }, {
            _custom_chooseText: '多选框',
            type: 'CheckboxGroup',
            label: '姓名6',
            options: {
              value: ['bb']
            },
            checkboxList: [
              {
                label: 'aa'
              },
              {
                label: 'bb'
              }
            ]
          }, {
            _custom_chooseText: '单选框',
            type: 'RadioGroup',
            label: '姓名10',
            options: {
              value: 'bb'
            },
            radioList: [
              {
                label: 'aa'
              },
              {
                label: 'bb'
              }
            ]
          },
          {
            _custom_chooseText: '表格',
            type: 'Table',
            label: '姓名11',
            options: {
              columns: [
                {
                  title: 'Name',
                  key: 'name'
                },
                {
                  title: 'Age',
                  key: 'age'
                },
                {
                  title: 'Address',
                  key: 'address'
                }
              ],
              data: [
                {
                  name: 'John Brown',
                  age: 18,
                  address: 'New York No. 1 Lake Park',
                  date: '2016-10-03'
                },
                {
                  name: 'Jim Green',
                  age: 24,
                  address: 'London No. 1 Lake Park',
                  date: '2016-10-01'
                },
                {
                  name: 'Joe Black',
                  age: 30,
                  address: 'Sydney No. 1 Lake Park',
                  date: '2016-10-02'
                },
                {
                  name: 'Jon Snow',
                  age: 26,
                  address: 'Ottawa No. 2 Lake Park',
                  date: '2016-10-04'
                }
              ]
            }
          },
          {
            _custom_chooseText: '可编辑表格',
            type: 'EditTable',
            label: '姓名14',
            options: {
              columns: [
                {
                  title: 'Name',
                  key: 'name',
                  type: 'input'
                },
                {
                  title: 'Age',
                  key: 'age',
                  type: 'inputNumber'
                },
                {
                  title: 'Address',
                  key: 'address'
                }
              ],
              data: [
                {
                  name: 'John Brown',
                  age: 18,
                  address: 'New York No. 1 Lake Park',
                  date: '2016-10-03'
                },
                {
                  name: 'Jim Green',
                  age: 24,
                  address: 'London No. 1 Lake Park',
                  date: '2016-10-01'
                },
                {
                  name: 'Joe Black',
                  age: 30,
                  address: 'Sydney No. 1 Lake Park',
                  date: '2016-10-02'
                },
                {
                  name: 'Jon Snow',
                  age: 26,
                  address: 'Ottawa No. 2 Lake Park',
                  date: '2016-10-04'
                }
              ]
            }
          },
          {
            _custom_chooseText: '运算',
            type: 'Operation',
            label: '运算2',
            options: {}
          }
        ],
        formItemList: [
          {
            children: [
              {
                id: '487d630d-16e7-33e1-bc7c-8bfbd5cc9330',
                type: 'EditTable',
                options: {
                  columns: [
                    {
                      title: 'Name',
                      key: 'name',
                      type: 'Input'
                    },
                    {
                      title: 'Age',
                      key: 'age',
                      type: 'InputNumber'
                    },
                    {
                      title: 'Address',
                      key: 'address',
                      type: 'CheckboxGroup',
                      checkboxList: [
                        {
                          label: 'New York'
                        },
                        {
                          label: 'London'
                        },
                        {
                          label: 'Sydney'
                        },
                        {
                          label: 'Ottawa'
                        }
                      ]
                    }
                  ],
                  data: [
                    {
                      name: 'John Brown',
                      age: 18,
                      address: ['New York', 'London'],
                      date: '2016-10-03'
                    },
                    {
                      name: 'Jim Green',
                      age: 24,
                      address: ['London'],
                      date: '2016-10-01'
                    },
                    {
                      name: 'Joe Black',
                      age: 30,
                      address: ['Sydney'],
                      date: '2016-10-02'
                    },
                    {
                      name: 'Jon Snow',
                      age: 26,
                      address: ['Ottawa'],
                      date: '2016-10-04'
                    }
                  ]
                }
              }
            ]
          },
          {
            children: [
              {
                id: '3b2a7973-0014-4dc2-b096-547e2222a7ff',
                type: 'Operation',
                label: '运算',
                isRequired: true,
                options: {
                  placeholder: '请输入'
                }
              }
            ]
          },
          {
            children: [
              {
                id: '4e645a40-482f-4878-8466-2281735304e2',
                type: 'Input',
                label: '姓名1',
                isRequired: true,
                options: {
                  placeholder: '请输入'
                },
                styles: {
                  width: '200px'
                }
              }
            ]
          },
          {
            children: [
              {
                id: 'ac6beb9b-50ea-4a0d-9632-2d0724122b84',
                type: 'Textarea',
                label: '姓名2',
                isRequired: true,
                options: {
                  placeholder: '请输入22',
                  rows: 4
                }
              }
            ]
          },
          {
            children: [
              {
                id: '21c64600-51c7-48d5-b4ad-0d225f3a08ee',
                type: 'InputNumber',
                label: '姓名3',
                isRequired: true,
                options: {
                  min: 15,
                  max: 20,
                  value: 16
                }
              },
              {
                id: '70448ff5-ccfe-43a6-ae40-1c10c5b2bb81',
                type: 'InputNumber',
                label: '姓名100',
                isRequired: true,
                options: {
                  min: 15,
                  max: 20,
                  value: 16
                }
              }
            ]
          },
          {
            children: [
              {
                id: 'e80cee74-05e5-42d5-a048-5117a8ebabad',
                type: 'Select',
                label: '姓名4',
                isRequired: true,
                options: {
                  clearable: true
                },
                optionList: [{
                  value: 'aa',
                  label: 'aa'
                }, {
                  value: 'bb',
                  label: 'bb'
                }, {
                  value: 'cc',
                  label: 'cc'
                }]
              }
            ]
          },
          {
            children: [
              {
                id: '26253a35-165c-476d-b2a1-3e7e60315f02',
                type: 'Upload',
                label: '姓名5',
                options: {
                  action: 'www.baidu.com'
                }
              }
            ]
          },
          {
            children: [
              {
                id: '6a30b406-4d17-4c73-9b7b-8c8b1febcffd',
                type: 'DatePicker',
                label: '姓名6',
                isRequired: true,
                options: {
                  placeholder: '请选择'
                }
              }
            ]
          },
          {
            children: [
              {
                id: '71dc25c7-2586-48c5-abd2-f367d3622b87',
                type: 'Checkbox',
                label: '姓名6',
                checkboxList: [
                  {
                    label: 'aa',
                    value: true
                  },
                  {
                    label: 'bb',
                    value: false
                  }
                ]
              }
            ]
          },
          {
            children: [
              {
                id: '8124774b-f6f8-4c59-a40b-a03e2524bb4b',
                type: 'CheckboxGroup',
                label: '姓名7',
                isRequired: true,
                options: {
                  value: ['bb']
                },
                checkboxList: [
                  {
                    label: 'aa'
                  },
                  {
                    label: 'bb'
                  },
                  {
                    label: 'cc'
                  }
                ]
              }
            ]
          },
          {
            children: [
              {
                id: 'a2d13d98-afc3-4dc8-aacf-9860b50e32d6',
                type: 'Radio',
                label: '姓名8',
                radioList: [
                  {
                    label: 'aa',
                    value: true
                  },
                  {
                    label: 'bb',
                    value: false
                  }
                ]
              }
            ]
          },
          {
            children: [
              {
                id: '40074d85-1b71-44ae-9d2d-b61ab05e6782',
                type: 'RadioGroup',
                label: '姓名10',
                isRequired: true,
                options: {
                  value: 'bb'
                },
                radioList: [
                  {
                    label: 'aa'
                  },
                  {
                    label: 'bb'
                  }
                ]
              }
            ]
          },
          {
            children: [
              {
                id: '487d630d-16e7-48e1-bc7c-8bfbd5cc9330',
                type: 'Table',
                label: '姓名11',
                options: {
                  columns: [
                    {
                      title: 'Name',
                      key: 'name'
                    },
                    {
                      title: 'Age',
                      key: 'age'
                    },
                    {
                      title: 'Address',
                      key: 'address'
                    }
                  ],
                  data: [
                    {
                      name: 'John Brown',
                      age: 18,
                      address: 'New York No. 1 Lake Park',
                      date: '2016-10-03'
                    },
                    {
                      name: 'Jim Green',
                      age: 24,
                      address: 'London No. 1 Lake Park',
                      date: '2016-10-01'
                    },
                    {
                      name: 'Joe Black',
                      age: 30,
                      address: 'Sydney No. 1 Lake Park',
                      date: '2016-10-02'
                    },
                    {
                      name: 'Jon Snow',
                      age: 26,
                      address: 'Ottawa No. 2 Lake Park',
                      date: '2016-10-04'
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    },
    methods: {
      addTbody () {
        this.formItemList[0].children[0].options.data.push({
          name: 'Joe Black',
          age: 30,
          address: ['Sydney'],
          date: '2016-10-02'
        })
      },
      listClick (formItem) {
        console.log(formItem)
      },
      revokeClick () {

      },
      deleteClick () {

      },
      async commitClick () {
        const res = await this.$refs['prop-form']._addOperation(this.operationFormula)
        console.log(res)
      },
      keysClick (item) {
        this.operationFormula.key += item.label
        this.operationFormula.value.push({
          type: 'keys',
          id: item.id
        })
      },
      numberClick () {
        this.operationFormula.key += this.operationNumber
        this.operationFormula.value.push({
          type: 'number',
          str: this.operationNumber
        })
      },
      symbolClick (str) {
        this.operationFormula.key += str
        this.operationFormula.value.push({
          type: 'symbol',
          str: str
        })
      },
      addData (item) {
        this.$refs['prop-form'].addData(item)
      },
      getFilterData () {
        const data = this.$refs['prop-form']._getFilterData()
        console.log(this.formItemList)
        console.log(data)
      },
      async formValidate () {
        const bol = await this.$refs['prop-form']._formValidate()
        console.log(bol)
      },
      // formValidate () {
      //   this.$refs['prop-form']._formValidate().then(bol => {
      //     console.log(bol)
      //   })
      // },
      formResetFields () {
        this.$refs['prop-form']._formResetFields()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .prop-form-demo {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .prop-form-container {
      width: 1270px;
      height: 100%;
      margin: 20px auto;
      position: relative;
      overflow: hidden;
      .prop-form-left {
        width: 265px;
        border: 1px solid black;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        > .list {
          width: 100%;
          > .detail {
            width: 33.3%;
            height: 63px;
            text-align: center;
            font-size: 12px;
          }
        }
      }
      .prop-form-right {
        width: 265px;
        height: 600px;
        border: 1px solid black;
        box-sizing: border-box;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
      }
    }
  }
</style>

